import { asideApi } from '@/api/login'
import { onMounted, reactive, ref } from 'vue';
import { oneItem } from '@/types/data'
import useStore from '@/stores';
import { ElMessage, ElMessageBox } from 'element-plus'
// import one from '@/assets/img/1.png'
// import two from '@/assets/img/2.png'
// import three from '@/assets/img/3.png'
// import four from '@/assets/img/4.png'
// import five from '@/assets/img/5.png'
// import six from '@/assets/img/6.png'
export default function useLayOut() {
  // 图标
  // const tu = ref([one, two, three, four, five, six])
  const loading = ref<boolean>(true)
  // pinia
  const { user } = useStore()
  // path路径 高亮持久问题
  let path = ref<string>(localStorage.getItem('path') || '/dashboard')
  // 有二级菜单的一级菜单
  let asideList = ref<oneItem[]>()
  // 无二级菜单的一级菜单
  let oneItem = ref<oneItem>()
  // 回显名字 持久化
  const selectName = ref<string | undefined>(localStorage.getItem('itemNmae') || '工作台')
  // 动态侧边栏
  const getAsideList = async (): Promise<void> => {
    const res = await asideApi()
    res.data.data.forEach((item, index) => item.img = `/src/assets/img/${index + 1}.png`)
    oneItem.value = res.data.data.shift()  // 筛选
    asideList.value = res.data.data
  }
  // 回显名字
  const select = (name: string | undefined): void => {
    // console.log(name)
    selectName.value = name
    localStorage.setItem('itemNmae', name as any)
  }
  // 高亮问题
  const select1 = (r: any): void => {
    // console.log(i, r)
    path.value = r
    localStorage.setItem('path', r)
  }
  // 退出登录
  const out = async () => {
    await ElMessageBox.confirm(
      '你确定退出登录吗?',
      '提示',
      {
        confirmButtonText: '退出',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
    user.out()
    ElMessage.success('退出成功')
  }
  getAsideList()
  return { select, select1, selectName, asideList, oneItem, user, path, out, loading }
}